<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
     <el-form-item label="日期" prop="orderTimes">
      <el-date-picker type="daterange" v-model="orderTimes" format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期" end-placeholder="结束日期"
                      range-separator="至" clearable></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading"
              :data="orderCountList"
              @cell-click="checkDetail"
              :cell-style="cellStyle"
              @selection-change="handleSelectionChange">
      <el-table-column label="区县" align="center" prop="address" />
      <el-table-column label="洗车服务" align="center" prop="washCount" />
      <el-table-column label="车辆保养" align="center" prop="careCount" />
      <el-table-column label="车辆维修" align="center" prop="repairCount" />
      <el-table-column label="总计" align="center" prop="totalCount" />
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改订单统计对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="服务id" prop="serviceId">
          <el-input v-model="form.serviceId" placeholder="请输入服务id" />
        </el-form-item>
        <el-form-item label="核销码" prop="verCode">
          <el-input v-model="form.verCode" placeholder="请输入核销码" />
        </el-form-item>
        <el-form-item label="核销码图片" prop="verImage">
          <image-upload v-model="form.verImage"/>
        </el-form-item>
        <el-form-item label="用户" prop="buyers">
          <el-input v-model="form.buyers" placeholder="请输入用户" />
        </el-form-item>
        <el-form-item label="商家" prop="seller">
          <el-input v-model="form.seller" placeholder="请输入商家" />
        </el-form-item>
        <el-form-item label="用户车辆" prop="userCar">
          <el-input v-model="form.userCar" placeholder="请输入用户车辆" />
        </el-form-item>
        <el-form-item label="原价" prop="prePrice">
          <el-input v-model="form.prePrice" placeholder="请输入原价" />
        </el-form-item>
        <el-form-item label="实付价格" prop="payPrice">
          <el-input v-model="form.payPrice" placeholder="请输入实付价格" />
        </el-form-item>
        <el-form-item label="预约时间" prop="orderTime">
          <el-date-picker clearable
            v-model="form.orderTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择预约时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="优惠券id" prop="couponId">
          <el-input v-model="form.couponId" placeholder="请输入优惠券id" />
        </el-form-item>
        <el-form-item label="支付状态" prop="paytus">
          <el-input v-model="form.paytus" placeholder="请输入支付状态" />
        </el-form-item>
        <el-form-item label="支付时间" prop="payTime">
          <el-date-picker clearable
            v-model="form.payTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择支付时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否评价" prop="evaluate">
          <el-input v-model="form.evaluate" placeholder="请输入是否评价" />
        </el-form-item>
        <el-form-item label="逻辑删除，0正常1删除" prop="del">
          <el-input v-model="form.del" placeholder="请输入逻辑删除，0正常1删除" />
        </el-form-item>
        <el-divider content-position="center">商户管理信息</el-divider>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddMerchant">添加</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteMerchant">删除</el-button>
          </el-col>
        </el-row>
        <el-table :data="merchantList" :row-class-name="rowMerchantIndex" @selection-change="handleMerchantSelectionChange" ref="merchant">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="序号" align="center" prop="index" width="50"/>
          <el-table-column label="店铺名称" prop="name" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" placeholder="请输入店铺名称" />
            </template>
          </el-table-column>
          <el-table-column label="注册时间" prop="regTime" width="240">
            <template slot-scope="scope">
              <el-date-picker clearable v-model="scope.row.regTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择注册时间" />
            </template>
          </el-table-column>
          <el-table-column label="详细地址" prop="address" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.address" placeholder="请输入详细地址" />
            </template>
          </el-table-column>
          <el-table-column label="审核状态" prop="status" width="150">
            <template slot-scope="scope">
              <el-select v-model="scope.row.status" placeholder="请选择审核状态">
                <el-option
                  v-for="dict in dict.type.merchant_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listOrderCount, getOrderCount, delOrderCount, addOrderCount, updateOrderCount } from "@/api/carService/orderCount";

export default {
  name: "OrderCount",
  dicts: ['merchant_status'],
  data() {
    return {
      orderTimes: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 子表选中数据
      checkedMerchant: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单统计表格数据
      orderCountList: [],
      // 商户管理表格数据
      merchantList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        startTime: null,
        endTime: null,
        serviceId: null,
        verCode: null,
        verImage: null,
        buyers: null,
        seller: null,
        userCar: null,
        prePrice: null,
        payPrice: null,
        status: null,
        couponId: null,
        paytus: null,
        payTime: null,
        evaluate: null,
        del: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        orderTime: [
          { required: true, message: "预约时间不能为空", trigger: "blur" }
        ],
        createTime: [
          { required: true, message: "下单时间不能为空", trigger: "blur" }
        ],
        payTime: [
          { required: true, message: "支付时间不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //样式设计
    cellStyle({ row, column, rowIndex, columnIndex }) {
      // console.log(row);
      // console.log(column);
      // console.log(rowIndex);
      // console.log(columnIndex);
      if (column.label === '洗车服务'||column.label === '车辆保养'||column.label === '车辆维修') {
        return 'color: blue;text-decoration: underline;';
      }
    },
    checkDetail(row,column,event,cell){
      console.log(this.orderTimes);
      let address=row.address;
      let service = column.label;
      this.$router.push({name:'OrderDetails',params: {address:address,service:service,time:this.orderTimes}})

    },


    /** 查询订单统计列表 */
    getList() {
      this.loading = true;
      listOrderCount(this.queryParams).then(response => {
        this.orderCountList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        orderDetailsId: null,
        serviceId: null,
        verCode: null,
        verImage: null,
        buyers: null,
        seller: null,
        userCar: null,
        prePrice: null,
        payPrice: null,
        status: null,
        createTime: null,
        couponId: null,
        paytus: null,
        payTime: null,
        evaluate: null,
        del: null
      };
      this.merchantList = [];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.startTime=this.orderTimes[0];
      this.queryParams.endTime = this.orderTimes[1];
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.borderTop=[];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.orderDetailsId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.form.merchantList = this.merchantList;
          if (this.form.orderDetailsId != null) {
            updateOrderCount(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addOrderCount(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // /** 删除按钮操作 */
    // handleDelete(row) {
    //   const orderDetailsIds = row.orderDetailsId || this.ids;
    //   this.$modal.confirm('是否确认删除订单统计编号为"' + orderDetailsIds + '"的数据项？').then(function() {
    //     return delOrderCount(orderDetailsIds);
    //   }).then(() => {
    //     this.getList();
    //     this.$modal.msgSuccess("删除成功");
    //   }).catch(() => {});
    // },
	/** 商户管理序号 */
    rowMerchantIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 商户管理添加按钮操作 */
    handleAddMerchant() {
      let obj = {};
      obj.name = "";
      obj.regTime = "";
      obj.address = "";
      obj.status = "";
      this.merchantList.push(obj);
    },
    /** 商户管理删除按钮操作 */
    handleDeleteMerchant() {
      if (this.checkedMerchant.length == 0) {
        this.$modal.msgError("请先选择要删除的商户管理数据");
      } else {
        const merchantList = this.merchantList;
        const checkedMerchant = this.checkedMerchant;
        this.merchantList = merchantList.filter(function(item) {
          return checkedMerchant.indexOf(item.index) == -1
        });
      }
    },
    /** 复选框选中数据 */
    handleMerchantSelectionChange(selection) {
      this.checkedMerchant = selection.map(item => item.index)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('carService/orderCount/export', {
        ...this.queryParams
      }, `orderCount_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
